<template>
	<view class="repair-wrap">
		<!-- 装修申请 -->
		<view>
			<!-- 第一部 -->
			<view v-if="buttonClick==0">
				<view class="repair-box u-p-40 u-p-l-30 u-p-r-30">
					<view v-if="homelist">
						<view>
							<span style=" display: flex; justify-content: center;align-items: center;">
								<span>
									<image style="width: 24px;height: 24px;margin-top: 7px;margin-right: 5px;"
										src="../../static/image/renovat.png"></image>
								</span>
								<span style="font-size: 20px;font-weight: 600;">
									{{homelist.proName}}{{homelist.buildDistrictCode}}-{{homelist.buildTowerCode}}-{{homelist.roomUnitNumber}}-{{homelist.roomCode}}
								</span>
							</span>
						</view>
					</view>

					<view style="margin-top: 20px;">
						<h3><span class="RedDot">*</span>选择装修周期：</h3>
						<!-- <span style="font-size: 16px;font-weight: 1000"></span> -->
						<view class="example-body" style="margin-top: 10px;">
							<uni-datetime-picker v-model='applyForm.renovate_begin_time' type="daterange"
								:clear-icon="true" rangeSeparator="至" @change="bindDateChange" />
						</view>
					</view>
					<view style="margin-top: 25px;">
						<h3><span class="RedDot">*</span>装修类型：</h3>
					</view>
					<view style="display: flex;margin-top: 15px;">
						<button class="button"
							:style="applyForm.renovate_type==1?'background: linear-gradient(180deg, #76D904 0%, #417505 100%); ;color:#ffffff; border:none':null"
							@click="applyForm.renovate_type = 1">装修公司</button>
						<button class="button"
							:style="applyForm.renovate_type==2?'background: linear-gradient(180deg, #76D904 0%, #417505 100%); ;color:#ffffff; border:none':null"
							@click="applyForm.renovate_type = 2">自己装修</button>
					</view>
				</view>

				<view class="u-font-26 u-p-t-30 u-p-b-30 u-p-l-48" style="display: flex;">
					<u-checkbox active-color="#00aa00" v-model="radio">我同意此</u-checkbox>
					<view @click="toMent" style="color: #417505;margin-top: 4px;">《装修协议》</view>
					<view style="margin-top: 4px;">所有内容</view>
				</view>
				<view style="margin-top: 20px;">
					<button class="button1" @click="nuxt(1)">下一步</button>
				</view>

			</view>

			<!-- 装修公司 -->
			<view v-if="buttonClick == 1">
				<view class="repair-box u-p-20 u-p-l-30 u-p-r-30" v-show="applyForm.renovate_type = 1">
					<view>
						<span style=" display: flex; justify-content: center;align-items: center;">
							<span>
								<image style="width: 24px;height: 24px;margin-top: 7px;margin-right: 5px;"
									src="../../static/image/renovat.png"></image>
							</span>

							<span style="font-size: 20px;font-weight: 600;">
								{{homelist.proName}}{{homelist.buildDistrictCode}}-{{homelist.buildTowerCode}}-{{homelist.roomUnitNumber}}-{{homelist.roomCode}}
							</span>
						</span>
					</view>
					<view class="header-form">
						<view class="header-li">
							<view class="header-name">
								<span style="font-size: 16px;font-weight: 600"><span class="RedDot">*</span>公司名称：</span>
							</view>
							<textarea placeholder="请输入装修公司全称" v-model="applyForm.renovate_outsource_org_name"
								class="text-area"></textarea>
							<view class="form-select"></view>
						</view>
						<view class="header-li">
							<view class="header-name">
								<span style="font-size: 16px;font-weight: 600"><span class="RedDot">*</span>公司地址：</span>
							</view>
							<textarea placeholder="请输入公司办公地址" v-model="applyForm.renovate_address"
								class="text-area"></textarea>
							<view class="form-select"></view>
						</view>
						<view class="header-li">
							<view class="header-name">
								<span style="font-size: 16px;font-weight: 600"><span class="RedDot">*</span>公司电话：</span>
							</view>
							<textarea placeholder="请输入公司电话" v-model="applyForm.renovate_outsource_org_tel"
								class="text-area"></textarea>
							<view class="form-select"></view>
						</view>
						<view class="header-li">
							<view class="header-name">
								<span style="font-size: 16px;font-weight: 600"><span
										class="RedDot">*</span>负责人姓名：</span>
							</view>
							<textarea placeholder="请输入负责人姓名" v-model="applyForm.renovate_owner_name"
								class="text-area"></textarea>
							<view class="form-select"></view>
						</view>
						<view class="header-li">
							<view class="header-name">
								<span style="font-size: 16px;font-weight: 600"><span
										class="RedDot">*</span>负责人电话：</span>
							</view>
							<textarea placeholder="请输入负责人电话" v-model="applyForm.renovate_owner_tel"
								class="text-area"></textarea>
							<view class="form-select"></view>
						</view>
					</view>


					<view style="margin-top: 20px;">
						<span style="font-size: 16px;font-weight: 600"> <span class="RedDot">*</span>
							<span style="margin-left: 10px;color: blue;" @click="uoloadHouse1()" v-if="!pdfUrl">
								上传装修合同（限1张）</span>
							<view v-else class="pdf-txt" @click="openPdf(pdfUrl)">
								<!-- {{ pdfUrl }} -->
								<image class="pdf-img" src="../../static/image/pdf.png" mode=""></image>
								<view>
									{{pdfName}}
									<text class="pdf-close" @click="closePdf()">X</text>
								</view>
							</view>
						</span>
						<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_contract_image">
							<view class="guarn-box2-img">
								<image mode="aspectFill" style="border-radius: 5px;"
									:src="applyForm.renovate_contract_image"></image>
								<u-icon @click="colseImg1" name="close" color="red" size="40"
									class="guarn-box2-img-close"></u-icon>
							</view>
						</view>
					</view>
					<view style="margin-top: 30px;">
						<span style="font-size: 16px;font-weight: 600;margin-left:20rpx">上传文件：</span>
					</view>
					<view class="guarn-box u-m-t-10" style="display: flex;">
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_licence_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_licence_image"></image>
									<u-icon @click="colseImg(applyForm.renovate_licence_image)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_licence_image">
								<view @click="uoloadHouse" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">营业执照</text></view>
								</view>
							</view>
						</view>

						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_construct_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_construct_image"></image>
									<u-icon @click="colseImg2(applyForm.renovate_construct_image)" name="close"
										color="red" size="40" style="margin-top: -15px;"
										class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_construct_image">
								<view @click="uoloadHouse2" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">装修施工图</text></view>
								</view>
							</view>
						</view>
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_result_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_result_image"></image>
									<u-icon @click="colseImg3(applyForm.renovate_result_image)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_result_image">
								<view @click="uoloadHouse3" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">装修效果图</text></view>
								</view>
							</view>
						</view>

					</view>
					<view class="foot_item">
						<button class="button2" @click="nuxtS(1)">上一步</button>
						<button class="button_in" @click="nuxt(2)">下一步</button>
					</view>
				</view>
			</view>
			<!-- 自己装修 -->
			<view v-if="buttonClick == 2">
				<view class="repair-box u-p-20 u-p-l-30 u-p-r-30">
					<view v-if="homelist">
						<h3>{{homelist.proName}}{{homelist.buildDistrictCode}}-{{homelist.buildTowerCode}}-{{homelist.roomUnitNumber}}-{{homelist.roomCode}}
						</h3>
					</view>
					<view class="guarn-box u-m-t-10" style="display: flex;">
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_contract_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_contract_image"></image>
									<u-icon @click="colseImg1(applyForm.renovate_contract_image)" name="close"
										color="red" size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_contract_image">
								<view @click="uoloadHouse1" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">装修合同</text></view>
								</view>
							</view>
						</view>
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_construct_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_construct_image"></image>
									<u-icon @click="colseImg2(applyForm.renovate_construct_image)" name="close"
										color="red" size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_construct_image">
								<view @click="uoloadHouse2" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">装修施工图</text></view>
								</view>
							</view>
						</view>
					</view>
					<view class="guarn-box u-m-t-10">
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="applyForm.renovate_result_image">
								<view class="guarn-box2-img">
									<image :src="applyForm.renovate_result_image"></image>
									<u-icon @click="colseImg3(applyForm.renovate_result_image)" name="close" color="red"
										size="40" class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
							<view class="guarn-box u-m-t-20" v-show="!applyForm.renovate_result_image">
								<view @click="uoloadHouse3" class="guarn-box-img">
									<image class="u-m-t-10" style="padding: 5px;" src="../../static/image/camera.svg"
										mode=""></image>
									<view><text style="color: #D2D2D2;">装修效果图</text></view>
								</view>
							</view>
						</view>

					</view>
					<view class="foot_item">
						<button class="button2" @click="nuxtS(1)">上一步</button>
						<button class="button_in" @click="nuxt(2)">下一步</button>
					</view>
				</view>
			</view>

			<!-- 装修申请2 -->
			<view v-if="buttonClick==3">

				<view class="repair-box u-p-t-20" style="background: #f4f4f4;">

					<view>
						<span style="font-size: 18px;font-weight: 900;margin-left: 30px;">装修人员信息：</span>
					</view>

					<view style="background: #fff;margin-top: 10px;padding: 0 25px;"
						v-for="(item, index) in applyForm.worker_data" :key="index">
						<view style="display: flex;padding-top: 10px;">
							<view class="guarn-box ">
								<view class="guarn-box guarn-box2 u-m-t-25" v-if="item.worker_image">
									<view class="guarn-box2-img" style="margin-top: 2px;">
										<image :src="item.worker_image"></image>
										<u-icon @click="colseImg4(item.worker_image,index)" name="close" color="red"
											size="40" class="guarn-box2-img-close"></u-icon>
									</view>
								</view>
								<view class="guarn-box" style="margin-top: 9px;" v-show="!item.worker_image">
									<view @click="uoloadHouse4(index)" class="guarn-box-img">
										<image src="../../static/image/camera.svg" mode=""></image>
										<view><text style="color: #D2D2D2;">上传头像</text></view>
									</view>
								</view>
							</view>

							<view class="header-form2" style=" width: 230px;">
								<view class="header-li2">
									<view class="header-name2">
										<span>姓名:</span>
									</view>
									<textarea placeholder="请输入人员姓名" v-model="item.worker_name"
										class="text-area2"></textarea>
									<view class="form-select"></view>
								</view>

								<view class="header-li2">
									<view class="header-name2">
										<span>电话:</span>
									</view>
									<textarea placeholder="请输入人员电话" v-model="item.worker_tel" class="text-area2"
										@input="proof1(index,item.worker_tel)"></textarea>
									<view class="form-select"></view>
								</view>

								<view class="header-li2">

									<textarea class="text-area2" v-model="item.worker_card" placeholder="请输入身份证号码"
										@input="proof2(index,item.worker_card)"></textarea>
									<view class="form-select"></view>
								</view>
							</view>
						</view>
						<view
							style="display: flex;margin-top: 15px;justify-content: space-around;padding-bottom: 10px;">

							<view>
								<span
									v-if="item.state1==true&&item.state3==true&&item.state4==true&&index==applyForm.worker_data.length-1"
									class="button_renovation" @click="addPeoperBtn()">
									<!-- 	<image style="width: 15px;height: 15px;margin-right: 5px;"
										src="../../static/image/zjryry.png">
									</image> -->
									<span
										v-if="item.state1==true&&item.state3==true&&item.state4==true&&index==applyForm.worker_data.length-1">增加装修人员</span>
								</span>
								<span v-else class="button_renovation2">
									<span>
										<image style="width: 15px;height: 15px;margin-right: 5px;"
											src="../../static/image/zjryHui.png">
										</image>
									</span>

									<span>增加装修人员</span>

								</span>
							</view>
							<!-- <view>
								<view v-for="(item, index2) in applyForm.worker_data" :key="index2">
									<view v-if="index2== index">
										<span v-if="item.renovation===true" class="button_renovation"
											@click="addPeoperBtn()">
											<image style="width: 15px;height: 15px;   margin-right: 5px;"
												src="../../static/image/zjryBlue.png">
											</image>1增加装修人员{{index}}
										</span>
										<span v-if="item.renovation===false" class="button_renovation2"
											@click="jianche(item)">
											<image style="width: 15px;height: 15px;   margin-right: 5px;"
												src="../../static/image/zjryHui.png">
											</image>2增加装修人员{{index}}
										</span>
									</view>
								</view>
							</view> -->
							<view style="width: 55px;height: 25px;" v-if="index!=0">
								<image style="width: 100%;height: 100%;" src="../../static/image/deleteadd.png" mode=""
									@click="delPeoperBtn">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="foot_item">
					<button class="button2" @click="nuxtS(2)">上一步</button>
					<button class="button_in" @click="nuxt(3)">下一步</button>
				</view>
			</view>
			<!-- 装修申请3 -->
			<view v-if="buttonClick==4">
				<view class="repair-box u-p-l-30 u-p-r-30" style="display: flex;">
					<view class="u-m-t-20 u-p-40 u-p-l-80 u-p-r-30" style="margin-left: 110px;text-align: center;">
						<text style="color: #999999;">押金金额</text><br>
						<text style="font-size: 20px;text-align: center;">
							<span style="color: #F9A832;font-size: 35px;    margin-right: 5px;"> {{applyForm.money}}
							</span><span style="color: #000;">元</span></text>
					</view>
				</view>

				<view class="mainpayment">
					<view class="mian_content1">
						<view class="u-flex">
							<image style="width: 25px;height: 25px;" src="../../static/image/wechatFriend.png" mode="">
							</image>
							<view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px;">微信支付
							</view>
							<u-checkbox shape="circle" v-model="weChat" active-color="#427705c7"
								@change="handleWechat(1)"><span style="color: #999;" </span></u-checkbox>
						</view>
						<view class="u-flex">
							<image style="width: 20px;height: 20px;" src="../../static/image/zhifubao.png" mode="">
							</image>
							<view style="margin-left: 5px;font-size: 16px;margin-right: 6px;margin-top: -2px">支付宝支付
							</view>
							<u-checkbox shape="circle" v-model="alipay" active-color="#427705c7"
								@change="handleWechat(2)"><span style="color: #999;" </span></u-checkbox>
						</view>
					</view>

				</view>

				<view class="foot">
					<view class="footer u-padding-left-30">

						<view style="display: flex;justify-content:space-between">
							<view class="u-m-t-32 u-font-32 u-m-r-20">合计：<text style="font-size: 44rpx;color: #F9A832;"
									class="txet">￥{{applyForm.money}}</text></view>
							<view class="button52" v-if="weChat" @click="">立即支付</view>
							<view class="button52" v-if="alipay" @click="chargeBtn()">立即支付</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script src="./js/addRenovations.js"></script>
<style lang="scss">
	@import './css/addRenovations.scss';
</style>